<template>
  <view class="contant">
    <view class="showModle" :class="{ show: isShow }" @click="cartToHide"></view>
    <view class="cart-wrap" :class="{ show: isShow }">
      <view class="cart_title flex">
        <view :class="active == 0 ? 'flex1 addActive' : 'flex1'" @click="changeNav(0)">非积分商品</view>
        <view :class="active == 1 ? 'flex1 addActive' : 'flex1'" @click="changeNav(1)">积分商品</view>
      </view>
      <view class="cart-box">
        <view class="cart_items">
          <swiper :current="active" class="swiper" @change="cartChange">
            <swiper-item class="cart-swiper-item" v-if="cartList.length">
              <view class="cart_item flex" v-for="(item, index) in cartList" :key="index">
                <image class="cart_img" mode="aspectFill" :src="item.thumb + '?imageView2/1/w/240/h/240/q/75'"></image>
                <view class="cart_info">
                  <view class="cart_main flex">
                    <view class="cart_prv cart_com flex1" @click="bindMinus(index)">-</view>
                    <view class="cart_num flex1">{{ item.num }}</view>
                    <view class="cart_nex cart_com flex1" @click="bindPlus(index)">+</view>
                  </view>
                  <view class="cart_tips flex_j flex">
                    <view class="cart_name">{{ item.title }}</view>
                    <view class="cart_norms">{{ item.attr_name }}</view>
                  </view>
                </view>
              </view>
              <view class="section"><textarea bindinput="bindInputText" placeholder="忌口等备注内容(可不填)" placeholder-style="color:#b7b6b6;" class="textarea" /></view>
            </swiper-item>
            <swiper-item class="cart-swiper-item" v-else>
              <view class="cart_items"><view class="no_cart">购物车空的快去选购商品吧~</view></view>
            </swiper-item>
            <swiper-item class="cart-swiper-item" v-if="integralCartList.length">
              <view class="cart_item flex" v-for="(item, index) in integralCartList" :key="index">
                <image class="cart_img" mode="aspectFill" :src="item.thumb + '?imageView2/1/w/240/h/240/q/75'"></image>
                <view class="cart_info">
                  <view class="cart_main flex">
                    <view class="cart_prv cart_com flex1" @click="bindMinusIntegral(index)">-</view>
                    <view class="cart_num flex1">{{ item.num }}</view>
                    <view class="cart_nex cart_com flex1" @click="bindPlusIntegral(index)">+</view>
                  </view>
                  <view class="cart_tips flex_j flex">
                    <view class="cart_name">{{ item.title }}</view>
                    <view class="cart_norms">{{ item.attr_name }}</view>
                  </view>
                </view>
              </view>
              <view class="section"><textarea bindinput="bindInputText" placeholder="忌口等备注内容(可不填)" placeholder-style="color:#b7b6b6;" class="textarea" /></view>
            </swiper-item>
            <swiper-item class="cart-swiper-item" v-else>
              <view class="cart_items"><view class="no_cart">购物车空的快去选购商品吧~</view></view>
            </swiper-item>
          </swiper>
        </view>
      </view>
      <view v-if="active == 0 && totalPrice" :class="cartList.length < 5 ? 'cart_btn' : 'cart_obtn'" @click="goPay">去结算(￥{{ totalPrice }})</view>
      <view v-else-if="active == 1 && integralTotalPrice" :class="cartList.length < 5 ? 'cart_btn' : 'cart_obtn'" @click="goIntegralPay">去结算(￥{{ integralTotalPrice}})</view>
    </view>
    <reg-member mType="integralPay" @menberShow="menberShow" @cartHide="cartHide" v-if="isMenberShow"></reg-member>
  </view>
</template>

<script>
import { CART_DETAIL, CART_CHANGE, CART_DELETE, ORDER_ADD, ORDER_LIST, 
INTEGRAL_CART_CHANGE, INTEGRAL_CART_DELETE, INTEGRAL_ORDER_ADD, INTEGRAL_CART_LIST } from '@/api';
import { debounce } from '@/common/util';
import goodsMixin from '@/mixins/goods.js'
import regMember from '@/components/regMember.vue';
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  components: {
    regMember
  },
  mixins: [goodsMixin],
  data() {
    return {
      tableId: this.$store.state.storeConf.table_id,
      deviceNum: this.$store.state.storeConf.device_num,
      storeId: this.$store.state.storeConf.store_id,
      cartList: [],
      integralCartList: [],
      totalPrice: 0,
      integralTotalPrice: 0,
      active: 0,
      isMenberShow: false
    };
  },
  mounted() {
    this.getCartData()
  },
  watch: {
    isShow() {
      this.getCartData()
    }
  },
  methods: {
    getCartData() {
      let pages = getCurrentPages();
      let page = pages[pages.length - 1];
      let cartList = this.$storage.get('cartList', false)
      let totalPrice = this.$storage.get('totalPrice', false)
      let integralCartList = this.$storage.get('integralCartList', false)
      let integralTotalPrice = this.$storage.get('integralTotalPrice', false)
      this.cartList = cartList && JSON.parse(cartList)
      this.totalPrice = totalPrice && JSON.parse(totalPrice)
      this.integralCartList = integralCartList && JSON.parse(integralCartList)
      this.integralTotalPrice = integralTotalPrice && JSON.parse(integralTotalPrice)
      if (page.route === 'pages/goods/index') {
        this.active = 0
      } else if(page.route === 'pages/goods/integral') {
        this.active = 1
      } else if(this.cartList.length) {
        this.active = 0
      } else if(this.integralCartList.length) {
        this.active = 1
      } else {
        this.active = 0
      }
    },
    changeNav(idx) {
      //积分商品切换
      this.active = idx;
    },
    // 添加订单&跳转支付页面
    goPay() {
      let that = this;
      let url = that.active ? INTEGRAL_ORDER_ADD : ORDER_ADD
      that.$_post(url, { table_id: that.tableId, device_num: that.deviceNum, store_id: that.storeId }).then(res => {
        if (res.code === 1) {
          that.$storage.set('orderNo', res.data.order_no)
          that.$storage.set('orderPrice', res.data.price)
          that.$emit('cartHide', {
            cart: false,
            pay: true,
            payType: 'general'
          });
        } else {
          that.$common.msgToShow(res.msg);
        }
      });
    },
    goIntegralPay() {
      let that = this
      that.$emit('cartHide', {
        cart: false,
        pay: false
      });
      that.isMenberShow = true
      // that.$emit('cartHide', {
      //   cart: false,
      //   pay: true,
      //   payType: 'integral'
      // });
    },
    cartHide (data) {
      this.$emit('cartHide', data)
    },
    // 隐藏购物车
    cartToHide() {
      this.$emit('cartToHide', false);
    },
    // 修改购物车列表
    changeCartList(){
      this.getIntegralCartList(this.tableId, this.storeId)
      this.getCartList(this.tableId, this.storeId)
    },
    // 减操作 非积分
    bindMinus: debounce(function(idx) {
      let that = this;
      let _item = that.cartList[idx];
      if (_item.num >= 1) {
        _item.num--;
      }
      that.$set(that.cartList, idx, _item);
      that.changeGoodsNum(_item.id, _item.num, idx, 'cart');
      that.calcTotalPrice();
    }, 150),
    // 减操作 积分
    bindMinusIntegral: debounce(function(idx) {
      let that = this;
      let _item = that.integralCartList[idx];
      if (_item.num >= 1) {
        _item.num--;
      }
      that.$set(that.integralCartList, idx, _item);
      that.changeGoodsNum(_item.id, _item.num, idx, 'integral');
      that.calcIntegralTotalPrice();
    }, 150),
    // 加操作 非积分
    bindPlus: debounce(function(idx) {
      let that = this;
      let _item = that.cartList[idx];
      _item.num++;
      that.$set(that.cartList, idx, _item);
      that.changeGoodsNum(_item.id, _item.num);
      that.calcTotalPrice();
    }, 150),
    // 加操作 积分
    bindPlusIntegral: debounce(function(idx) {
      let that = this;
      let _item = that.integralCartList[idx];
      _item.num++;
      that.$set(that.integralCartList, idx, _item);
      that.changeGoodsNum(_item.id, _item.num);
      that.calcIntegralTotalPrice();
    }, 150),
    // 重新计算非积分商品价格
    calcTotalPrice() {
      let that = this;
      let totalPrice = 0;
      that.cartList.map(item => {
        totalPrice += item.num * (parseFloat(item.price) * 100)
      });
      that.totalPrice = totalPrice / 100;
    },
    // 重新计算积分商品价格
    calcIntegralTotalPrice() {
      let that = this;
      let totalPrice = 0;
      that.integralCartList.map(item => {
        totalPrice += item.num * (parseFloat(item.price) * 100)
      });
      that.integralTotalPrice = totalPrice / 100;
    },
    // 修改购物车商品数量
    changeGoodsNum(id, num, idx, type) {
      let that = this;
      let url = that.active ? INTEGRAL_CART_CHANGE : CART_CHANGE
      that.$_get(url, { id: id, num: num }).then(res => {
        if (res.code === 1) {
          // 修改成功
          if (num === 0 && type === 'cart') {
            that.cartList.splice(idx, 1)
          } else if (num === 0 && type === 'integral') {
            that.integralCartList.splice(idx, 1)
          }
          that.changeCartList()
        } else {
          that.$common.msgToShow(res.msg);
        }
      });
    },
    cartChange (e) {
      this.active = e.target.current
    },
    menberShow(data) {
      this.isMenberShow = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.cart-wrap {
  position: fixed;
  top: 8vw;
  right: 0;
  bottom: 0;
  width: 31vw;
  background: #dedede;
  z-index: 9;
  overflow-y: scroll;
  transition: all 0.3s;
  transform: translateX(31vw);
  display: block;
  &.show {
    transform: translateX(0);
  }
}
.addActive {
  color: #c8ad67;
  border-bottom: solid 2px #c8ad67;
}

.showModle {
  z-index: 2;
  display: none;
  &.show {
    display: block;
  }
}

.cart_title {
  height: 5vw;
  line-height: 5vw;
  font-size: 18px;
  text-align: center;
  color: #888888;
  border-bottom: 1px #cccccc solid;
  margin-bottom: 10px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  background-color: #fff;
  width: 100%;
}
.cart_items {
  padding: 0 10px;
  height: 100%;
}
.cart_items .swiper{
  height: 100% !important;
}
.cart_item {
  margin-bottom: 10px;
  position: relative;
  padding-left: 80px;
  &:last-child{
    margin-bottom: 0;
  }
}
.cart_img {
  width: 80px;
  height: 80px;
  position: absolute;
  left: 0;
  top: 0;
}
.cart_info {
  width: 237px;
  background: #f5f5f5;
}
.cart_main {
  padding: 6px;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  color: #c9ab6f;
  line-height: 36px;
  border-bottom: #dedede solid 2px;
  font-size: 18px;
}
.cart_com {
  font-size: 24px;
  font-weight: bold;
}
.cart_num {
  border-left: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  color: #000000;
}
.cart_tips {
  line-height: 30px;
  box-sizing: border-box;
  position: relative;
  padding: 0 6vw 0 5px;
}
.section {
  padding: 10px 5px;
}
.textarea {
  padding: 10px;
  box-sizing: border-box;
  border-radius: 6px;
  background: f6f6f6;
  box-shadow: 0 0 8px #888888;
  width: 100%;
  height: 60px;
  margin-right: 0;
}
.cart_price {
  justify-content: flex-end;
  line-height: 44px;
  font-size: 18px;
  color: #e85229;
}
.cart_txt {
  color: #000000;
}
.cart_icon {
  font-size: 17px;
  margin-right: 4px;
}
.cart_salePrice {
  color: #e85229;
  margin-right: 24px;
}
.cart_btn {
  height: 5vw;
  line-height: 5vw;
  background: #c8ad67;
  text-align: center;
  font-size: 20px;
  color: #ffffff;
  position: absolute;
  width: 100%;
  bottom: 0;
  right: 0;
  z-index: 9;
}
.cart_obtn {
  height: 5vw;
  line-height: 5vw;
  background: #c8ad67;
  text-align: center;
  font-size: 20px;
  color: #ffffff;
  position: absolute;
  width: 100%;
  bottom: 0;
  right: 0;
  z-index: 9;
}
.no_cart {
  line-height: 8vw;
  text-align: center;
  color: #999999;
}
.cart-box{
  padding-top: 6vw;
  padding-bottom: 6vw;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
}
.cart_name{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 14vw;
}
.cart_norms{
  position: absolute;
  right: 5px;
  top: 0;
  width: 6vw;
  text-align: right;
}
.cart-swiper-item{
  overflow-y: auto !important;
}
</style>
